<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keyword" content="">
    <meta name="theme-color" content="#600090">
    <meta name="msapplication-navbutton-color" content="#600090">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#600090">
    <link rel="shortcut icon" href="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    <link rel="alternate" type="application/atom+xml" title="菜菜莱莱" href="/atom.xml">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css">
    <title>
        
        Hexo + 码云搭建个人博客｜极乐净土
        
    </title>

    <link rel="canonical" href="http://sy0626.gitee.io/2017/07/08/Hexo + 码云搭建个人博客/">

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/blog-style.css">

    <!-- Pygments Github CSS -->
    <link rel="stylesheet" href="/css/syntax.css">
</head>

<style>

    header.intro-header {
        background-image: url('')
    }
</style>
<!-- hack iOS CSS :active style -->
<body ontouchstart="" class="animated fadeIn">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top " id="nav-top" data-ispost = "true" data-istags="false
" data-ishome = "false" >
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand animated pulse" href="/">
                <span class="brand-logo">
                    菜菜莱莱
                </span>
                's Blog
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- Known Issue, found by Hux:
            <nav>'s height woule be hold on by its content.
            so, when navbar scale out, the <nav> will cover tags.
            also mask any touch event of tags, unfortunately.
        -->
        <!-- /.navbar-collapse -->
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">Home</a>
                    </li>
					
                    
					
					
                </ul>
            </div>
        </div>
    </div>
    <!-- /.container -->
</nav>
<script>
    // Drop Bootstarp low-performance Navbar
    // Use customize navbar with high-quality material design animation
    // in high-perf jank-free CSS3 implementation
//    var $body   = document.body;
    var $toggle = document.querySelector('.navbar-toggle');
    var $navbar = document.querySelector('#huxblog_navbar');
    var $collapse = document.querySelector('.navbar-collapse');

    $toggle.addEventListener('click', handleMagic)
    function handleMagic(e){
        if ($navbar.className.indexOf('in') > 0) {
        // CLOSE
            $navbar.className = " ";
            // wait until animation end.
            setTimeout(function(){
                // prevent frequently toggle
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        }else{
        // OPEN
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }
</script>

<!-- Main Content -->

<!--only post-->


<img class="wechat-title-img"
     src="">


<style>
    
    header.intro-header {
        background-image: url('')
    }

    
</style>

<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 text-center">
                <div class="post-heading">
                    <h1>Hexo + 码云搭建个人博客</h1>
                    
                    <span class="meta">
                         作者 菜菜莱莱
                        <span>
                          日期 2017-07-08
                         </span>
                    </span>
                    <div class="tags text-center">
                        
                        <a class="tag" href="/tags/#个人学习"
                           title="个人学习">个人学习</a>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="post-title-haojen">
        <span>
            Hexo + 码云搭建个人博客
        </span>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- Post Container -->
            <div class="col-lg-8 col-lg-offset-1 col-sm-9 post-container">
                <p>近来有了换工作的念头，便把自己之前的笔记都整理一下，发现写的到处都是，而且csdn的帐号还忘了。。囧。。<br>于是乎便兴起了搭建个人博客的念头。<br>之前在Github上搭建过一次，由于网络原因后来放弃了。因为最近一直使用的码云也支持了pages，决定在码云上开始搭建。</p>
<p><em>本地搭建是在windows环境下进行。</em></p>
<h3 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h3><p><strong>码云</strong><br><strong>Hexo</strong><br><strong>Git</strong><br><strong>Node.js</strong></p>
<h4 id="1、下载安装Node-js"><a href="#1、下载安装Node-js" class="headerlink" title="1、下载安装Node.js"></a>1、下载安装Node.js</h4><p>下载地址： <a href="https://nodejs.org/en/" target="_blank" rel="external">https://nodejs.org/en/</a><br>下载完成后按照提示安装即可。</p>
<h4 id="2、下载安装Git"><a href="#2、下载安装Git" class="headerlink" title="2、下载安装Git"></a>2、下载安装Git</h4><p>you need Baidu or Google</p>
<h4 id="3、安装Hexo框架"><a href="#3、安装Hexo框架" class="headerlink" title="3、安装Hexo框架"></a>3、安装Hexo框架</h4><p>打开cmd<br><figure class="highlight"><table><tr><td class="code"><pre><div class="line">npm install hexo-cli -g</div></pre></td></tr></table></figure></p>
<p><img src="./1507473553221.png" alt="Alt text"><br>输入命令<br><figure class="highlight gcode"><table><tr><td class="code"><pre><div class="line">hexo</div></pre></td></tr></table></figure></p>
<p><img src="./1507473648144.png" alt="Alt text"></p>
<p>安装成功！</p>
<h4 id="4、搭建Hexo"><a href="#4、搭建Hexo" class="headerlink" title="4、搭建Hexo"></a>4、搭建Hexo</h4><p>在你的任意盘符下，创建一个文件夹，名字任意<br>右键文件夹，选择Git Bash Here，弹出git命令框<br>输入命令<br><figure class="highlight"><table><tr><td class="code"><pre><div class="line">npm install -g hexo-cli</div></pre></td></tr></table></figure></p>
<p><img src="./1507473816340.png" alt="Alt text"></p>
<p>继续输入命令<br><figure class="highlight gcode"><table><tr><td class="code"><pre><div class="line">hexo i<span class="symbol">nit</span></div></pre></td></tr></table></figure></p>
<p><img src="./1507473848127.png" alt="Alt text"></p>
<p>进入文件夹如果有以下文件即为初始化成功<br><img src="./1507473932054.png" alt="Alt text"></p>
<p>输入命令生成静态页面<br><figure class="highlight gcode"><table><tr><td class="code"><pre><div class="line">hexo g</div></pre></td></tr></table></figure></p>
<p><img src="./1507473985556.png" alt="Alt text"></p>
<p>启动本地服务预览调试<br><figure class="highlight gcode"><table><tr><td class="code"><pre><div class="line">hexo s</div></pre></td></tr></table></figure></p>
<p><img src="./1507474029226.png" alt="Alt text"></p>
<p>浏览器打开：localhost:4000查看</p>
<h4 id="5、绑定项目"><a href="#5、绑定项目" class="headerlink" title="5、绑定项目"></a>5、绑定项目</h4><p>注册码云帐号，选择新建项目<br><img src="./1507474173592.png" alt="Alt text"><br><img src="./1507474284819.png" alt="Alt text"></p>
<font color="red"><br><strong>注意：这里有个坑，使用码云pages托管的项目，项目名称一定要跟自己的用户名保持一致，否则会导致无法访问项目下的静态资源。如果不知道自己的用户名，点击右上角头像。</strong><br></font><br><img src="./1507474423551.png" alt="Alt text"><br><br>点击 克隆/下载，复制HTTPS的链接<br><br>修改本地项目根目录的_config.yml文件<br><img src="./1507474738816.png" alt="Alt text"><br><font color="red"><br><strong>注意：配置文件中所有的属性后都有空格</strong><br></font>

<p>配置Git环境<br><figure class="highlight"><table><tr><td class="code"><pre><div class="line">$ git config --global user.name 码云用户名</div></pre></td></tr></table></figure></p>
<figure class="highlight"><table><tr><td class="code"><pre><div class="line">$ git config --global user.email 码云邮箱</div></pre></td></tr></table></figure>
<p>准备将项目同步到码云<br><figure class="highlight"><table><tr><td class="code"><pre><div class="line">npm install hexo-deployer-git --save</div></pre></td></tr></table></figure></p>
<p><img src="./1507475156135.png" alt="Alt text"></p>
<p>一键部署<br><figure class="highlight gcode"><table><tr><td class="code"><pre><div class="line">hexo deploy</div></pre></td></tr></table></figure></p>
<p>在弹出对话框里，输入码云的帐号密码。</p>
<h4 id="6、启动码云pages"><a href="#6、启动码云pages" class="headerlink" title="6、启动码云pages"></a>6、启动码云pages</h4><p><img src="./1507475255106.png" alt="Alt text"><br><img src="./1507475270950.png" alt="Alt text"><br><img src="./1507475294689.png" alt="Alt text"></p>
<font color="red"><br><strong>到这里就搭建成功了。</strong><br></font>

                <hr>
                

                <ul class="pager">
                    
                    <li class="previous">
                        <a href="/2017/07/10/什么时候会产生冲突/" data-toggle="tooltip" data-placement="top"
                           title="Java 8中HashMap和LinkedHashMap如何解决冲突">&larr; Previous Post</a>
                    </li>
                    
                    
                </ul>

                

                


                <!--加入新的评论系统-->
                
            </div>

            <div class="hidden-xs col-sm-3 toc-col">
                <div class="toc-wrap">
                    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#准备工作"><span class="toc-text">准备工作</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1、下载安装Node-js"><span class="toc-text">1、下载安装Node.js</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、下载安装Git"><span class="toc-text">2、下载安装Git</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3、安装Hexo框架"><span class="toc-text">3、安装Hexo框架</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4、搭建Hexo"><span class="toc-text">4、搭建Hexo</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5、绑定项目"><span class="toc-text">5、绑定项目</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6、启动码云pages"><span class="toc-text">6、启动码云pages</span></a></li></ol></li></ol>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Sidebar Container -->

            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->
                
                <section>
                    <!-- no hr -->
                    <h5 class="text-center">
                        <a href="/tags/">FEATURED TAGS</a>
                    </h5>
                    <div class="tags">
                        
                        <a class="tag" href="/tags/#个人学习"
                           title="个人学习">个人学习</a>
                        
                    </div>
                </section>
                

                <!-- Friends Blog -->
                
            </div>
        </div>

    </div>
</article>







<!-- Footer -->
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 text-center">
                <br>
                <ul class="list-inline text-center">
                
                
                

                

                

                

                

                </ul>
                <p class="copyright text-muted">
                    Copyright &copy; 菜菜莱莱 2017
                    <br>
                    <span id="busuanzi_container_site_pv" style="font-size: 12px;">PV: <span id="busuanzi_value_site_pv"></span> Times</span>
                    <br>
                    Theme by <a href="https://haojen.github.io/">Haojen Ma</a>
                </p>

            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/blog.js"></script>

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>

<!-- jquery.tagcloud.js -->
<script>
    // only load tagcloud.js in tag.html
    if($('#tag_cloud').length !== 0){
        async("http://sy0626.gitee.io/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                //size: {start: 1, end: 1, unit: 'em'},
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>

<!--fastClick.js -->
<script>
    async("//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>

<!-- Google Analytics -->



<!-- Baidu Tongji -->


<!-- swiftype -->
<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

  _st('install','','2.0.0');
</script>

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!--wechat title img-->
<img class="wechat-title-img" src="">
</body>

</html>
